<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
		
		<style>
			/* 渲染没有完成时,就不展现 */
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求:
				设定课程的乘积：score 根据课程的成绩进行评级
				v-if/v-else位置应该联系，v-else不可单独使用
				score>=90 显示优秀
				score>=80 显示良好
				score>=70 显示中等
				score>=60 显示及格
				score< 60 显示不及格
			 -->
			 <h3 v-if="score>=90" v-cloak>优秀</h3>
			 <h3 v-else-if="score>=80&&score<90" v-cloak>良好</h3>
			 <h3 v-else-if="score>=70 && score<80" v-cloak>中等</h3>
			 <h3 v-else-if="score>=60 && score<70" v-cloak>及格</h3>
			 <h3 v-else v-cloak>不及格</h3>
			 
			 <!-- v-show指令 h3标签动态的展现  跟一个布尔类型的值
				  style="dispaly:none 如果数据频繁的切换 效率更高"
			 -->
			 <h3 v-show="isShow">展现一个变化的数据</h3>
			 <button @click="isShow= !isShow">切换</button>
		</div>
			
			
			<script src="../js/vue.js"></script>
			<script>
				const app=new Vue({
					el:"#app",
					data:{
						score:50,
						isShow:true
					}
				})
				
			</script>
	</body>
</html>
